<template>
    <div id="template-bank">
      <div class="choose-tab choose_filer ">选择模板
        <div class="img_filer_right selector_filter" v-if="bankFilter">
          <selector  v-model="filterVal" :options="selectorList" @on-change="onChange"></selector>
        </div>
        <div class="img_filer_right" v-if="!bankFilter">
          <div class="filter_val" @click="onClickVal">{{filterVal}}</div>
          <scroller lock-x scrollbar-y  height="300px" v-show="filterShow" class="filter_scroller">
            <div class="box2">
              <p v-for="(i, index) in selectorList" :key="index" @click="filterClick(index)">{{i}}</p>
            </div>
          </scroller>
        </div>
      </div>
      <ul class="template-ul">
        <scroller lock-x scrollbar-y use-pullup  @on-pullup-loading="loadMore" v-model="status" ref="scroller" >
          <div class="box2">
            <li is="choose-template" v-for="(choose,index) in templateimglist" :i="choose" :keyindex="index"></li>
            <div class="clear"></div>
            <load-more v-if="templateimglist.length === 0" :show-loading="false" :tip="'暂无图片'"  background-color="#fbf9fe"></load-more>
          </div>
          <div slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up" style="position: absolute; width: 100%; height: 40px; bottom: -40px; text-align: center;">
            <span v-show="status.pullupStatus === 'default'"></span>
            <span class="pullup-arrow" v-show="status.pullupStatus === 'down' || status.pullupStatus === 'up'" :class="{'rotate': status.pullupStatus === 'up'}">松开加载</span>
            <span v-show="status.pullupStatus === 'loading'"><spinner type="ios-small"></spinner></span>
          </div>
        </scroller>
      </ul>
    </div>
</template>
<script>
var timeStamp = String(Number(new Date()))
import ChooseTemplate from '../comment/ChooseTemplate'
import { Scroller, Spinner, Selector, LoadMore } from 'vux'
import api from '../api'
import utils from '../utils'
export default {
  data () {
    return {
      templateimglist: [],
      creditloanlist: [],
      selectorList: ['全部'],
      filterVal: '全部', // 筛选模板图片
      filterShow: false,
      bankFilter: true,
      tokenval: '',
      chooseId: '',
      PageNum: 100, // 记录每页数
      count: 1,
      status: {
        pullupStatus: 'default',
        pulldownStatus: 'default'
      }
    }
  },
  components: {
    ChooseTemplate,
    Scroller,
    Spinner,
    Selector,
    LoadMore
  },
  created () {
    window.document.title = '选择模板'
    this.tokenval = utils.AuthToken(timeStamp, this.$store.state.userkey)
    if (((/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i).test(navigator.userAgent))) {
      this.bankFilter = true
    } else {
      this.bankFilter = false
    }
    this.chooseId = utils.getQueryString('template_id') || ''
    this.loadmore(this.chooseId, this.PageNum)
    var paramsed = {
      page: 1,
      perPage: '',
      partnerType: '-1'
    }
    api.creditloan(paramsed).then(res => {
      console.log(res)
      if (res.status === 200) {
        this.creditloanlist = res.data.list
        var list = []
        for (var i in this.creditloanlist) {
          list.push(this.creditloanlist[i].partnerName)
        }
        this.selectorList = this.selectorList.concat(list)
        if (utils.getQueryString('template_id')) {
        for (var j in this.creditloanlist) {
          if (this.creditloanlist[j].partnerId === utils.getQueryString('template_id')) {
            this.selectVal = this.creditloanlist[j].partnerName
            this.chooseId = this.creditloanlist[j].partnerId
          }
        }
      }
      }
    })
  },
  methods: {
    loadMore () {
      this.count ++
      this.PageNum = 10 * this.count + 100
      this.$vux.loading.show({
        text: '加载更多'
      })
      setTimeout(() => {
        this.loadmore(this.chooseId, this.PageNum)
        setTimeout(() => {
          this.$refs.scroller.donePullup()
        }, 10)
      }, 2000)
    },
    loadmore (partnerId, index) {
      this.templateimglist = []
      var params = {
        Tokenuser: this.tokenval,
        userid: this.$store.state.userID,
        timestamp: timeStamp,
        partnerId: partnerId,
        page: 1,
        perPage: index
      }
      api.template(params).then(res => {
        console.log(res, 101)
        if (res.data.list) {
          this.templateimglist = res.data.list
        }
      })
    },
     onClickVal () {
      this.filterShow = !this.filterShow
    },
    filterClick (index) {
      this.filterShow = !this.filterShow
      this.filterVal = this.selectorList[index]
      if (index === 0) {
        this.templatelist = []
        this.chooseId = ''
        this.loadmore(this.chooseId, this.PageNum)
      } else {
        for (var j in this.creditloanlist) {
          if (this.creditloanlist[j].partnerName === this.selectorList[index]) {
            this.chooseId = this.creditloanlist[j].partnerId
            this.templatelist = []
            this.loadmore(this.chooseId, this.PageNum)
          }
        }
      }
    },
    onChange (val) {
      this.templatelist = []
      if (val === this.selectorList[0]) {
        this.chooseId = ''
        this.loadmore(this.chooseId, this.PageNum)
      } else {
        for (var j in this.creditloanlist) {
          if (this.creditloanlist[j].partnerName === val) {
            this.chooseId = this.creditloanlist[j].partnerId
            this.loadmore(this.chooseId, this.PageNum)
          }
        }
      }
    },
  }
}
</script>
